<template>
	<!-- 插槽模式 -->
	<view>
		<vk-data-fab-group
			:pattern="fab.pattern"
			:content="fab.content"
			:horizontal="fab.horizontal"
			:vertical="fab.vertical"
			:direction="fab.direction"
			:click-auto-close="fab.clickAutoClose"
			:fab-icon="fab.fabIcon"
			:position="fab.position"
			:mask-close-able="fab.maskCloseAble"
			:show="fab.show"
			@trigger="trigger"
		></vk-data-fab-group>
	</view>
</template>

<script>
	export default {
		data() {
			// 页面数据变量
			return {
				fab:{
					pattern:{
						color:"#3c3e49",// 未选中的项的文字颜色
						selectedColor:"#007AFF", // 选中的项的文字颜色
						backgroundColor:"#ffffff", // 弹窗的背景色
						buttonColor:"rgba(0,0,0,0.8)", // 主按钮的背景色
					},
					content:[
						{ icon:"/static/logo.png", selectedIcon:"/static/logo.png", text:"首页" },
						{ icon:"/static/logo.png", selectedIcon:"/static/logo.png", text:"订单" },
						{ icon:"/static/logo.png", selectedIcon:"/static/logo.png", text:"我的" },
						{ icon:"/static/logo.png", selectedIcon:"/static/logo.png", text:"客服" },
					],
					position:{
						right:"30px",
						bottom:"20px"
					},
					horizontal:"right",// 水平对齐方式。left:左对齐，right：右对齐
					vertical:"bottom",// 垂直对齐方式。bottom:下对齐，top：上对齐
					direction:"vertical", // 展开菜单显示方式。horizontal:水平显示，vertical：垂直显示
					clickAutoClose:true,// 点击后是否自动关闭弹窗
					maskCloseAble:true,// 点击遮罩是否可以关闭弹出层
					show:false, // 默认先打开还是先关闭
					/**
					 * 自定义浮球的按钮图标
					 * 以是图片也可以是icon, 如果是icon,则默认是uView的icon
					 * 若是图片,则路径必须是带/ 如/static/logo.png
					 * 也可以使用插槽来达到自定义icon 插槽名称 icon
					 */
					fabIcon:"/static/logo.png",
				},
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			
		},
		// 函数
		methods: {
			trigger(obj){
				uni.showToast({
					title:`点击了${obj.item.text}`,
					icon:"none"
				})
			}
		},
		// 过滤器
		filters:{
			
		},
		// 计算属性
		computed:{
			
		}
	}
</script>
<style lang="scss" scoped>
	
</style>